<template>
  <div id="mapping">
    <!-- 手机 -->
    <div class="terminal">
      <img src="../../assets/image/terminal.png" alt="" />
      <p>
        <span>终端（万）</span><br />
        <span style="font-weight: bolder; font-size: 20px">0</span>
      </p>
    </div>
    <!-- 导航线 -->
    <div class="guide">
      <ul>
        <li></li>
        <li></li>
      </ul>
      <p></p>
    </div>
    <!-- 中间过滤 -->
    <div class="filter_box">
      <div class="filter">
        <img src="../../assets/image/BSC.png" alt="" />
        <p>
          <span>BSC（万）</span><br />
          <span style="font-weight: bolder; font-size: 20px">0</span>
        </p>
      </div>
      <div class="filter">
        <img src="../../assets/image/RNC.png" alt="" />
        <p>
          <span>RNC（万）</span><br />
          <span style="font-weight: bolder; font-size: 20px">0</span>
        </p>
      </div>
      <div class="filter">
        <img src="../../assets/image/EnodeB.png" alt="" />
        <p>
          <span>EnodeB（万）</span><br />
          <span style="font-weight: bolder; font-size: 20px">0</span>
        </p>
      </div>
      <div class="filter">
        <img src="../../assets/image/NB-IOY.png" alt="" />
        <p>
          <span>NB-IOY（万）</span><br />
          <span style="font-weight: bolder; font-size: 20px">0</span>
        </p>
      </div>
    </div>
    <!-- 导航线-蓝色 -->
    <div class="guideTwo_blue">
      <ul>
        <li></li>
        <li></li>
      </ul>
      <p></p>
    </div>
    <!-- 导航线-黄色 -->
    <div class="guideTwo_yellow">
      <ul>
        <li></li>
        <li></li>
      </ul>
      <p></p>
    </div>
    <!-- SGSN和SGW -->
    <div class="colation_box">
      <div class="colation">
        <img src="../../assets/image/SGSN.png" alt="" />
        <p>
          <span>SGSN/MEE（万）</span><br />
          <span style="font-weight: bolder; font-size: 20px">0</span>
        </p>
      </div>
      <div class="colation">
        <img src="../../assets/image/SGW.png" alt="" />
        <p>
          <span>SGW/PGW（万）</span><br />
          <span style="font-weight: bolder; font-size: 20px">0</span>
        </p>
      </div>
    </div>
    <!-- 导航线-蓝色 -->
    <div class="guideThree_blue"></div>
    <!-- 导航线-黄色 -->
    <div class="guideThree_yellow">
      <p></p>
    </div>
    <!-- HLR和DNS  -->
    <div class="protect_box">
      <div class="protect">
        <img src="../../assets/image/HLR.png" alt="" />
        <p>
          <span>HLR/HSS（万）</span><br />
          <span style="font-weight: bolder; font-size: 20px">0</span>
        </p>
      </div>
      <div class="protect">
        <img src="../../assets/image/DNS.png" alt="" />
        <p>
          <span>DNS（万）</span><br />
          <span style="font-weight: bolder; font-size: 20px">0</span>
        </p>
      </div>
    </div>
    <!-- 客户 -->
    <div class="enterprise">
      <img src="../../assets/image/enterprise.png" alt="" />
      <p>
        <span>企业客户</span><br />
        <span style="font-weight: bolder; font-size: 20px">0</span>
      </p>
    </div>
  </div>
</template>

<style scoped>
/* 结构图 */
#mapping {
  width: 100vw;
  height: 35vh;
  position: relative;
}
/* 手机 */
#mapping .terminal {
  background: url("../../assets/image/Shape_copy1.png") no-repeat;
  background-size: 100% 100%;
  width: 11vw;
  height: 8vh;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  color: #1e83a0;
  position: absolute;
  top: 18vh;
  left: 3vw;
}
#mapping .terminal img {
  margin-right: 10px;
  width: 50px;
  height: 50px;
}
/* 导航线 */
#mapping .guide {
  border: 3px solid #0079c2;
  border-right: 0;
  width: 6vw;
  height: 30vh;
  position: absolute;
  left: 19vw;
  top: 5vh;
}
.guide ul {
  margin-top: 10vh;
}
.guide li {
  width: 6vw;
  height: 10vh;
  border-top: 3px solid #0079c2;
}
.guide p {
  width: 5vw;
  border-top: 3px solid #0079c2;
  position: absolute;
  top: 16vh;
  left: -5.2vw;
}
/* 中间过滤 */
#mapping .filter_box {
  position: absolute;
  left: 25vw;
  top: 3vh;
}
.filter_box .filter {
  width: 11vw;
  height: 8vh;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  color: #1e83a0;
  background: url("../../assets/image/Shape_copy1.png") no-repeat;
  background-size: 100% 100%;
  margin-bottom: 1vh;
}
.filter img {
  margin: 0 10px;
  width: 40px;
  height: 40px;
}
/* 导航线-绿色 */
#mapping .guideTwo_blue {
  border: 3px solid #16ECD6;
  border-left: 0;
  width: 4vw;
  height: 30vh;
  position: absolute;
  left: 36vw;
  top: 4vh;
}
.guideTwo_blue ul {
  margin-top: 8vh;
}
.guideTwo_blue li {
  width: 4vw;
  height: 10vh;
  border-top: 3px solid #16ECD6;
}
.guideTwo_blue p {
  width: 7vw;
  border-top: 3px solid #16ECD6;
  position: absolute;
  top: 1vh;
  left: 4vw;
}
/* 导航线-黄色 */
#mapping .guideTwo_yellow {
  border: 3px solid #E7E403;
  border-left: 0;
  width: 6vw;
  height: 28vh;
  position: absolute;
  left: 36vw;
  top: 7vh;
}
.guideTwo_yellow ul {
  margin-top: 8vh;
}
.guideTwo_yellow li {
  width: 6vw;
  height: 10vh;
  border-top: 3px solid #E7E403;
}
.guideTwo_yellow p {
  width: 5vw;
  border-top: 3px solid #E7E403;
  position: absolute;
  bottom: 1vh;
  left: 6.1vw;
}
/* SGSN和SGW */
#mapping .colation_box {
  height: 35vh;
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
  position: absolute;
  left: 47vw;
  top: 3vh;
}
.colation_box .colation {
  width: 11vw;
  height: 8vh;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  color: #1e83a0;
  background: url("../../assets/image/Shape_copy1.png") no-repeat;
  background-size: 100% 100%;
}
.colation img {
  margin: 0 10px;
  width: 40px;
  height: 40px;
}
/* 导航线-绿色 */
#mapping .guideThree_blue {
  border-top: 3px solid #16ECD6;
  width: 10vw;
  position: absolute;
  left: 58vw;
  top: 7vh;
}
/* 导航线-黄色 */
#mapping .guideThree_yellow {
  border-bottom: 3px solid #E7E403;
  width: 27vw;
  position: absolute;
  left: 58vw;
  top: 34vh;
}
.guideThree_yellow p {
  width: 8vw;
  height: 9vh;
  border-top: 3px solid #E7E403;
  border-left: 3px solid #E7E403;
  position: absolute;
  bottom: 0;
  left: 2vw;
}
/* HLR和DNS */
#mapping .protect_box {
  height: 26vh;
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
  position: absolute;
  left: 68vw;
  top: 3vh;
}
.protect_box .protect {
  width: 11vw;
  height: 8vh;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  color: #1e83a0;
  background: url("../../assets/image/Shape_copy1.png") no-repeat;
  background-size: 100% 100%;
}
.protect img {
  margin: 0 10px;
  width: 40px;
  height: 40px;
}
/* 客户 */
#mapping .enterprise {
  width: 11vw;
  height: 8vh;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  color: #1e83a0;
  background: url("../../assets/image/Shape_copy1.png") no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: 29.5vh;
  left: 85vw;
}
.enterprise img {
  margin: 0 10px;
  width: 50px;
  height: 50px;
}
@media screen and (max-width: 1366px) {
  /* 结构图 */
  #mapping {
    width: 100vw;
    height: 35vh;
    position: relative;
  }
  /* 手机 */
  #mapping .terminal {
    background: url("../../assets/image/Shape_copy1.png") no-repeat;
    background-size: 100% 100%;
    width: 11vw;
    height: 8vh;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    font-size: 12px;
    color: #1e83a0;
    position: absolute;
    top: 18vh;
    left: 3vw;
  }
  #mapping .terminal img {
    margin-right: 10px;
    width: 50px;
    height: 50px;
  }
  /* 导航线 */
  #mapping .guide {
    border: 3px solid #0079c2;
    border-right: 0;
    width: 6vw;
    height: 30vh;
    position: absolute;
    left: 19vw;
    top: 5vh;
  }
  .guide ul {
    margin-top: 10vh;
  }
  .guide li {
    width: 6vw;
    height: 10vh;
    border-top: 3px solid #0079c2;
  }
  .guide p {
    width: 5vw;
    border-top: 3px solid #0079c2;
    position: absolute;
    top: 16vh;
    left: -5.2vw;
  }
  /* 中间过滤 */
  #mapping .filter_box {
    position: absolute;
    left: 25vw;
    top: 3vh;
  }
  .filter_box .filter {
    width: 11vw;
    height: 8vh;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    font-size: 12px;
    color: #1e83a0;
    background: url("../../assets/image/Shape_copy1.png") no-repeat;
    background-size: 100% 100%;
    margin-bottom: 1vh;
  }
  .filter img {
    margin: 0 10px;
    width: 40px;
    height: 40px;
  }
  /* 导航线-绿色 */
  #mapping .guideTwo_blue {
    border: 3px solid #16ECD6;
    border-left: 0;
    width: 4vw;
    height: 30vh;
    position: absolute;
    left: 36vw;
    top: 4vh;
  }
  .guideTwo_blue ul {
    margin-top: 8vh;
  }
  .guideTwo_blue li {
    width: 4vw;
    height: 10vh;
    border-top: 3px solid #16ECD6;
  }
  .guideTwo_blue p {
    width: 7vw;
    border-top: 3px solid #16ECD6;
    position: absolute;
    top: 1vh;
    left: 4vw;
  }
  /* 导航线-黄色 */
  #mapping .guideTwo_yellow {
    border: 3px solid #E7E403;
    border-left: 0;
    width: 6vw;
    height: 28vh;
    position: absolute;
    left: 36vw;
    top: 7vh;
  }
  .guideTwo_yellow ul {
    margin-top: 8vh;
  }
  .guideTwo_yellow li {
    width: 6vw;
    height: 10vh;
    border-top: 3px solid #E7E403;
  }
  .guideTwo_yellow p {
    width: 5vw;
    border-top: 3px solid #E7E403;
    position: absolute;
    bottom: 1vh;
    left: 6.1vw;
  }
  /* SGSN和SGW */
  #mapping .colation_box {
    height: 35vh;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    position: absolute;
    left: 47vw;
    top: 3vh;
  }
  .colation_box .colation {
    width: 11vw;
    height: 8vh;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    font-size: 12px;
    color: #1e83a0;
    background: url("../../assets/image/Shape_copy1.png") no-repeat;
    background-size: 100% 100%;
  }
  .colation img {
    margin: 0 10px;
    width: 40px;
    height: 40px;
  }
  /* 导航线-绿色 */
  #mapping .guideThree_blue {
    border-top: 3px solid #16ECD6;
    width: 10vw;
    position: absolute;
    left: 58vw;
    top: 7vh;
  }
  /* 导航线-黄色 */
  #mapping .guideThree_yellow {
    border-bottom: 3px solid #E7E403;
    width: 27vw;
    position: absolute;
    left: 58vw;
    top: 34vh;
  }
  .guideThree_yellow p {
    width: 8vw;
    height: 9vh;
    border-top: 3px solid #E7E403;
    border-left: 3px solid #E7E403;
    position: absolute;
    bottom: 0;
    left: 2vw;
  }
  /* HLR和DNS */
  #mapping .protect_box {
    height: 26vh;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    position: absolute;
    left: 68vw;
    top: 3vh;
  }
  .protect_box .protect {
    width: 11vw;
    height: 8vh;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    font-size: 12px;
    color: #1e83a0;
    background: url("../../assets/image/Shape_copy1.png") no-repeat;
    background-size: 100% 100%;
  }
  .protect img {
    margin: 0 10px;
    width: 40px;
    height: 40px;
  }
  /* 客户 */
  #mapping .enterprise {
    width: 11vw;
    height: 8vh;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    font-size: 12px;
    color: #1e83a0;
    background: url("../../assets/image/Shape_copy1.png") no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 29.5vh;
    left: 85vw;
  }
  .enterprise img {
    margin: 0 10px;
    width: 50px;
    height: 50px;
  }
}
</style>